<template>
    <div class="detail">
        <div class="homedetail">
            <div class="detailimg">
                <img :src="info.icon" alt="">
            </div>
            <div class="info">
                <div>名称:{{ info.name }}</div>
                <div>类型:{{ info.typeName }}</div>
                <div>价格: <span style="color: red; font-weight: bold;">￥{{ info.price }}</span> </div>
                <div> <el-input-number :min="0" v-model="info.number" @change="changenum" ></el-input-number> </div>
                <div><el-button type="success" @click="addcollect()">加入购物车</el-button>
                </div>
                <!-- <div>酒店介绍：{{ info.description }}</div> -->

            </div>
        </div>


       
    </div>
</template>
<style>
.nr p img {
    width: 100%;
}
</style>
<script>
import service from '@/request'

export default {
    data() {
        return {
            info: {},
            value1: "",
            addressId: "",
            adlist: [],
            activeName: 'first',
            fromVisible1: false,
            tableData: [],
            fromVisible: false,
            form: {},
            user: {},
            commentlist: [],
        }
    },
    mounted() {
        this.user = JSON.parse(window.localStorage.getItem("userinfo"));
        this.getdetail()

    },
    methods: {
        changenum(e){
            console.log(e)
        
            this.$forceUpdate()
        },
        save1() {

        },
      
        async addcollect() {
              const res = await service.post("/cart/add", {
                infoId:this.info.id,
                num:this.info.number,
                price:this.info.price
              });
            console.log(res)
            if (res.code == 200) {
this.$message.success("成功");
            }
        },
       
        detail(id) {
            this.$router.push({
                path: "/usertypedetail?id=" + id
            })

        },
        async getdetail() {
            const res = await service.get("/info/detail?id=" + this.$route.query.id);
            console.log(res)
            this.info = res.data

            this.info.number = 1;
        },

        pj() {
            this.fromVisible = true
            this.form = {}
        }
    }


}
</script>

<style scoped>
.hotelitem {
    width: 20%;
    margin-right: 20px;

}

.hotellist {
    width: 50%;
    display: flex;
    margin: 20px auto;

    justify-content: flex-start;
    flex-wrap: wrap;
}

.info div {
    margin-bottom: 10px;
}

.detailimg img {
    width: 250px;
    height: 250px;
}

.detailimg {
    margin-right: 10px;
    width: 250px;
    height: 250px;
}

.homedetail {
    width: 50%;
    display: flex;
    margin: 0 auto;
}

.homedetail1 {
    width: 50%;
    margin: 0 auto;
}

.detail {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 38%;
    box-sizing: border-box;

}

.commentylist {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    display: flex;
}
</style>